<template>
	<view class="wrapper" :style="`padding-top:calc(100rpx + ${safeTop}px)`">
		<div class="flex-start header posf" :style="{padding:`calc(52rpx + ${safeTop}px) 40rpx 25rpx`}">
			<div class="center cfff" @click="openPage('../chengShi/chengShi')">
				<div class="mr5">{{city.name}}</div>
				<u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon>
			</div>
			<div class="input-box flex-start ml30 bfff" @click="openPage('../souSuo/souSuo')">
				<u-icon name="search" color="#999" size="18"></u-icon>
				<div class="f20 c999 flex1">搜索影片</div>
			</div>
		</div>
		<div class="box1 mb20">
			<swiper class="swiper" circular="true" indicator-active-color="#fff" indicator-color="rgba(255,255,255,.8)"
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(v,index) in linkInfos.carousels" :key="index">
					<image :src="v.img" mode="aspectFill" class="swiper" @click="openImg(v)"></image>
				</swiper-item>
			</swiper>
		</div>
	<!-- 	<div class="box2 align-start">
			<image :src="linkInfos.left.img" mode="aspectFill" class="nav1 mr15" @click="openImg(linkInfos.left)">
			</image>
			<div class="right-box">
				<image :src="linkInfos.rightTop.img" mode="aspectFill" class="nav2 mb15"
					@click="openImg(linkInfos.rightTop)"></image>
				<image :src="linkInfos.rightButtom.img" mode="aspectFill" class="nav2 mb15"
					@click="openImg(linkInfos.rightButtom)"></image>
			</div>
		</div> -->
		<div class="box3 bfff">
			<div class="center">
				<div class="f32 fbold text1 flex1">正在热映</div>
				<div class="center" @click="openAll(0)">
					<div class="f26 c999 mr10">全部</div>
					<u-icon name="arrow-right" color="#999" size="16" class="arrow-right"></u-icon>
				</div>
			</div>
			<div class="content-box flex-start">
				<div class="colun main posr" v-for="v in list" :key="v.movieId">
					<div class="cover mb10 posr">
						<div class="posa video-type cfff">
							{{v.showmark}}
						</div>
						<image lazy-load :src="v.poster" mode="aspectFill" class="cover "
							@click="openPage('/pages/dianYing/xiangXi?movieId='+v.movieId)"></image>
					</div>
					<div class="posa video-score cfff f20">{{v.score}}分</div>
					<div class="f26 mb20 nowrap">{{v.movieName}}</div>
					<div class="bth-red"
						@click="openPage('/pages/dianYing/dianYing?movieId='+v.movieId+'&name='+v.movieName)">购票
					</div>

				</div>
				<div class="w100 center" v-if="list.length==0">
					<!-- 暂无更多 -->
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</div>
			</div>
		</div>
		<div class="box3 bfff">
			<div class="center">
				<div class="f32 fbold flex1 c333">即将上映</div>
				<div class="center" @click="openAll(2)">
					<div class="f26 c999 mr10">全部</div>
					<u-icon name="arrow-right" color="#999" size="16" class="arrow-right"></u-icon>
				</div>
			</div>
			<div class="content-box flex-start">
				<div class="colun main" v-for="v in soonList" :key="v.movieId">
					<div class="cover mb10 posr">
						<div class="posa video-type cfff">
							IMAX 3D
						</div>
						<image lazy-load :src="v.poster" mode="aspectFill" class="cover"
							@click="openPage('/pages/dianYing/xiangXi?movieId='+v.movieId)"></image>
					</div>

					<div class="f26 mb10 nowrap">{{v.movieName}}</div>
					<div class="f26 c999 mb20">{{v.openday.substring(0,10)}}</div>
					<div class="btn-blue"
						@click.stop="openPage('/pages/dianYing/dianYing?movieId='+v.movieId+'&name='+v.movieName)">
						预售</div>
				</div>
				<div class="w100 center" v-if="soonList.length==0">
					<!-- 暂无更多 -->
					<u-empty mode="list" icon="/http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				soonList: [],
				keyword: '',
				city: {},
				linkInfos: {
					carousels: [],
					left: {},
					rightTop: {},
					rightButtom: {}
				} 
				
			};
		},
		onShow() {
			this.city = uni.getStorageSync('city')
		},
		 onShareAppMessage: function () {
		    return {
		      title: '分享',
		      path: 'pages/shouye/shouye?id=123'
		    }
		  },
		onLoad() {
			this.getSoonMovie()
			this.getlinkInfos()
			this.getCities()
		},
		methods: {
			openAll(index) {
				uni.setStorageSync('index', index)
				this.openPage('/pages/dianYingYuan/dianYingYuan', 1)
			},
			// 获取当前城市
			getNowCity() {
				let that = this
				uni.showLoading({
					title: '定位中...',
					mask: true
				})
				uni.getFuzzyLocation({
					success(r) {
						console.log(r)
						uni.setStorageSync('location', r)
						that.$http('/api/getCurrentCity', {
							longitude: r.longitude,
							latitude: r.latitude
						}).then(c => {
							uni.setStorageSync('city', {
								name: c.data.cityName,
								id: c.data.cityCode
							})
							that.city = uni.getStorageSync('city')
						})
					},
					fail(r) {
						console.log(r)
						uni.setStorageSync('city', that.cities[0])
						that.city = uni.getStorageSync('city')
						that.sToast('定位失败，使用默认城市')
						uni.hideLoading()
					}
				})
			},
			// 城市列表
			getCities() {
				let that = this
				this.$http('/api/getCities').then(r => {
					this.cities = r.data.map(c => {
						return {
							name: c.cityName,
							id: c.cityCode
						}
					})
					// #ifdef MP
					this.getNowCity()
					// #endif
					
				})
			},
			openImg(v) {
				if (v.type == 0) {
					uni.switchTab({
						url: v.url
					})
				} else if (v.type == 1) {
					uni.navigateTo({
						url: v.url
					})
				} else if (v.type == 2) {
					uni.navigateToMiniProgram({
						// appid  写你要跳转的小程序的 appid
						appId: v.appid,
						// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
						path: v.url,
						extraData: {
							// 'type': 'out'
						},
						// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
						envVersion: 'develop'
					})
				} else if (v.type == 3) {
					uni.navigateTo({
						url: '../webView?url=' + v.url
					})
				}
			},
			//查询轮播图
			getlinkInfos() {
				this.$http('/api/linkInfos').then((r) => {
					console.log(r)
					this.linkInfos = r.data
				})
			},
			// 查询即将上映
			getSoonMovie() {
				this.$http('/api/soon/movie').then((r) => {
					this.soonList = r.data.filter((e) => {
						return e.movieName.indexOf(this.keyword) != -1
					})
				})
				this.$http('/api/hot/movie').then((r) => {
					this.list = r.data.filter((e) => {
						return e.movieName.indexOf(this.keyword) != -1
					})
				})
			},
			// 跳转页面-试听会员商品列表
			goDetail() {
				uni.navigateTo({
					url: '../shiTingHuiYuan/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background: url(../../static/shouye/indexback.png) no-repeat top left;
		background-size: 100% auto;
		padding-top: 120rpx;

		.header {
			padding: 25rpx 40rpx;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 20;
			background: url(../../static/shouye/indexback.png) no-repeat top left;
			background-size: 100% auto;

			.input-box {
				width: 310rpx;
				height: 50rpx;
				border-radius: 25rpx;
				padding: 0 20rpx;
			}
		}

		.video-score {
			left: 10rpx;
			bottom: 115rpx;
			z-index: 10;
		}

		.video-type {
			top: 15rpx;
			left: 0;
			background-color: rgba(0, 0, 0, .6);
			font-size: 20rpx;
			padding: 5rpx 10rpx;
			z-index: 10;
			border-radius: 0 10rpx 10rpx 0;
		}

		.box1 {
			padding: 0 20rpx;

			.swiper {
				height: 210rpx;
				border-radius: 15rpx;
				width: 100%;
				overflow: hidden;
			}
		}

		.box2 {
			margin-bottom: 15rpx;
			padding: 0 20rpx;

			// background: #F3F4F5;
			.nav1 {
				width: 261rpx;
				height: 311rpx;
				border-radius: 15rpx;
			}

			.right-box {
				.nav2 {
					width: 464rpx;
					height: 138rpx;
					display: block;
					border-radius: 15rpx;
				}
			}
		}

		.box3 {
			margin: 0 20rpx 22rpx;
			padding: 25rpx 0 25rpx 25rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx #F2F3F4;
			border-radius: 13rpx 13rpx 13rpx 13rpx;

			.text1 {
				color: #FF5555;
			}

			.arrow-right {
				margin-right: 25rpx;
			}

			.content-box {
				margin-top: 35rpx;
				overflow-x: auto;

				.cover {
					width: 188rpx;
					height: 264rpx;
					border-radius: 15rpx;
				}

				.main {
					margin-right: 18rpx;
					width: 188rpx;
				}
			}
		}
	}
</style>